<template>
<div class="unitProject">
    <Row style="height:100%">
        <!-- 左侧树 -->
        <Col span="6" class="col-tree" style="height:100%">
        <Row>
            <Col span="24">
                <Button @click="projectChoice" class="title-button">{{ projectName }}</Button>
            </Col>
        </Row>
        <Row class="tree-length">
            <Col span="24" style="overflow:auto;height:100%;">
                <Tree :data="unitProjectDataTree" :load-data="loadData" @on-select-change="treeSelect"></Tree>
            </Col>
        </Row>
        </Col>
        <!-- 右方表格 -->
        <Col span="18" class="col-main">
        <div class="button-s">
            <Button type="primary" @click="addBtn('add', '1', '新增')" v-if="addButton">新增</Button>
        </div>
        <Table border :columns="columns1" :data="unitProjectData" ref="tableExpand">
            <template slot-scope="{ row, index }" slot="action">
                <span title="编辑" 
                    class="button-class" 
                    type="text" 
                    v-if="editButton" 
                    @click="editBtn('edit', row, '编辑')">编辑</span>
                <span title="详情" 
                    class="button-class" 
                    type="text" 
                    v-if='detailButton'
                    @click="editBtn('details', row, '详情')">详情</span>
                <span title="删除" 
                    class="button-class" 
                    type="text" 
                    v-if="delButton"
                    @click="deleteBtn(row.id)">删除</span>
            </template>
        </Table>
        <div class="page-div">
            <Page :total="page.total" :current="page.current" :page-size="page.pageSize" show-sizer show-elevator show-total @on-change="pageChange" @on-page-size-change="onPageSizeChange" />
        </div>
        </Col>
    </Row>
    <Modal v-model="projectBox" @on-ok="okModel" @on-cancel="projectBox = !projectBox" width="900">
        <div class="role-title">
            选择项目
        </div>
        <Row style="padding-top:30px;">
            <Col span="16" offset="4">
            <Row :gutter="16">
                <Col span="20">
                <Input v-model="searveName" placeholder="请选择项目" />
                </Col>
                <Col span="4">
                <Button type="primary" @click="projectGetAll">搜索</Button>
                </Col>
            </Row>
            </Col>
        </Row>
        <Row style="padding-top:30px;">
            <Col span="16" offset="4">
                <Table :columns="columns2" :data="data1" @on-row-click="toggleTableExpand" ref="tableExpand"></Table>
            </Col>
        </Row>
        <div slot="footer"></div>
    </Modal>
</div>
</template>

<script>
import closeTag from '../../../mixins/closeTag'
import {
    mapState
} from 'vuex'
export default {
    mixins: [closeTag],
    data() {
        return {
            searveName: '',
            columns2: [{
                    title: '项目名称',
                    align: 'center',
                    key: 'shortName'
                },
                {
                    title: '管理单位',
                    key: 'manageEntName',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    }
                                },
                                params.row.projectManage.manageEntName
                            )
                        ])
                    }
                }
            ],
            data1: [],
            addId:'',
            projectName: '请选择项目',
            projectTreeData: [],
            projectId: '',
            parentId: '',
            selectTree: false,
            projectBox:false,
            columns1: [{
                    title: '序号',
                    align: 'center',
                    width: '80px',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page.current - 1) * this.page.pageSize + 1
                        )
                    }
                },
                {
                    title: '名称',
                    key: 'name',
                    align: 'center',
                    render: (h, params) => {
                        return h(
                            'span',{
                                style:{
                                    display: 'inline-block',
                                    width: '100%',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: 'nowrap'
                                }
                            },params.row.name
                            
                        )
                    }
                },
                {
                    title: '风险等级',
                    key: 'dictRiskGradeName',
                    align: 'center'
                },
                {
                    title: '是否为控制工程',
                    key: 'dictControlEngineeringName',
                    align: 'center'
                },
                {
                    title: '操作',
                    width: '180px',
                    align: 'center',
                    slot: 'action'
                }
            ],
            unitProjectData: [],
            tree: [],
            unitProjectDataTree: [],
            page: {
                total: 0,
                current: 1,
                pageSize: 10,
                totalPage: 0
            },
            parmes: {
                pageSize: 10,
                current: 1,
                whereMap: {
                    projectId: '',
                    parentId: ''
                    // name: '',
                    // wbsId: '',
                    // dictRiskGrade: 'RISK_GRADE_1',
                    // dictControlEngineering: 'IS_CONTROL_ENGINEERING_1'
                }
            },
            addButton:false,//新增按钮
            searchButton:false,//搜索按钮
            editButton: false, //编辑按钮
            detailButton: false, //详情按钮
            delButton: false, //删除按钮
            buttonList: localStorage.getItem('buttonList'), //按钮权限
        }
    },
    computed: {
        ...mapState(['selectPorject'])
    },
    created() {
        this.getUserDefaultProject()
    },
    mounted() {
        this.projectGetAll()
        this.getButtonStatus()  //按钮权限
    },
    methods: {
        //获取按钮权限
        getButtonStatus() {
            let path = this.$route.name
            JSON.parse(this.buttonList).forEach((item, index) => {
                if (Object.keys(item)[0] == path) {
                    this.button = item[path];
                }
            })
            this.button.forEach(val => {
                if (val.code == "P_020401_01") {
                    this.addButton = true;
                } else if (val.code == "P_020401_02") {
                    this.editButton = true
                } else if (val.code == "P_020401_03") {
                    this.delButton = true
                } else if (val.code == "P_020401_04") {
                    this.detailButton = true
                }
            })
        },
        okModel(){},
        projectGetAll() {
            let parmes = {
                shortName: this.searveName,
                cascade:true,
                isQueryJurProject:true
            }
            this.$api.UnitProject.projectGetAll(parmes).then(resp => {
                if (resp.code == 200) {
                    this.data1 = resp.data
                }
            })
        },
        toggleTableExpand(row, index) {
            if(row.isUnitChild){
                row.children = []
                row.loading = false
            }
            this.projectBox = !this.projectBox
            this.projectName = row.shortName
            this.unitProjectDataTree = []
            this.unitProjectDataTree.push(row)
        },
        // ------
        projectChoice() {
            this.projectBox = !this.projectBox
        },
        //默认显示的项目
        getUserDefaultProject() {
            this.$api.UnitProject.userDefaultProject().then(res => {
                if (res.code == 200) {
                    this.projectName = res.data.shortName
                    res.data.title = res.data.shortName
                    if (res.data.isUnitChild) {
                        res.data.children = []
                        res.data.loading = false
                    }
                    this.unitProjectDataTree.push(res.data)
                } else {
                    this.$Message.error(res.data.msg)
                }
            })
        },
        treeSelect(item) {
            this.selectTree = item[0]
            console.log('selectTree',this.selectTree)
            if (item[0].nodeKey === 0) {
                this.parmes.whereMap.projectId = item[0].id
                this.parmes.whereMap.parentId = '0'
            } else {
                this.parmes.whereMap.projectId = item[0].projectId
                this.parmes.whereMap.parentId = item[0].id
            }
            this.unitProjectList(this.parmes)
        },
        //树结构异步加载
        loadData(item, callback) {
            let params = {
                projectId: '',
                parentId: ''
            }
            if (item.nodeKey === 0) {
                params.parentId = '0'
                this.projectId = item.id
                params.projectId = item.id
            } else {
                params.parentId = item.id
                params.projectId = this.projectId
            }
            this.unitTreeGetAll(params).then((res) => {
                res.forEach(e => {
                    e.title = e.name;
                    if (e.isUnitChild) {
                        e.children = []
                        e.loading = false;
                    }
                })
                this.tree = res;
                callback(this.tree);
            });
        },
        addBtn(type, id, name) {
            let self = this
            if (!this.selectTree) {
                this.$Message.warning('请先选择项目')
            } else {
                const addId = parseInt(Math.random() * 100000)
                const route = {
                    name: 'unit-project-add',
                    params: {
                        type: type,
                        id: addId,
                        name: '新增信息',
                        projectId:self.parmes.whereMap.projectId,
                        projectName: self.projectName,
                        parentId: self.parmes.whereMap.parentId
                    },
                    query:{
                        isProject:this.selectTree.isProject,
                        dictControlEngineering:this.selectTree.dictControlEngineering,
                    }
                }
                self.$router.push(route)
            }
        },
        editBtn(type, row, name) {
            let data = this.projectTreeData
            const route = {
                name: type == 'edit' ? 'unit-project-edit' : 'unit-project-detail',
                params: {
                    type: type,
                    id: row.id,
                    name: type == 'edit' ? '编辑信息' : '详情',
                    projectId: row.projectId,
                    projectName: this.projectName,
                    parentId: row.parentId
                },
                query:{
                    isProject:this.selectTree.isProject,
                    dictControlEngineering:this.selectTree.dictControlEngineering,
                }
            }
            this.$router.push(route)
        },
        //删除
        deleteBtn(id) {
            this.$Modal.confirm({
                title: '温馨提示',
                closable: true,
                content: '确认删除吗？',
                width: 360,
                onOk: () => {
                    this.unitTreeDelete(id)
                }
            })
        },
        //删除单位工程
        unitTreeDelete(id) {
            this.$api.UnitProject.unitTreeDelete(id).then(res => {
                if (res.code === 200) {
                    this.$Message.success('删除成功')
                    this.unitProjectList(this.parmes)
                } else {
                    this.$Message.error(res.message)
                }
            })
        },
        unitTreeGetAll(parmes) {
            return this.$api.UnitProject.unitTreeGetAll(parmes).then(resp => {
                if (resp.code == 200) {
                    return resp.data;
                } else {
                    this.$Message.warning(res.message)
                }
            })
        },
        unitProjectList(parmes) {
            this.$api.UnitProject.unitTreeList(parmes).then(resp => {
                if (resp.code == 200) {
                    this.unitProjectData = resp.data.resultObject
                    this.page.total = resp.data.totalRecord
                    this.page.totalPage = resp.data.totalPages
                }
            })
        },
        // 分页页码变化
        pageChange(index) {
            this.parmes.current = index
            this.parmes.whereMap.projectId = this.projectId
            this.parmes.whereMap.parentId = this.parentId ? this.parentId : '0'
            this.unitProjectList(this.parmes)
        },
        //
        onPageSizeChange(size) {
            this.parmes.pageSize = size
            this.unitProjectList(this.parmes)
        },
    },

}
</script>

<style lang="scss" scoped>
.unitProject {
    height:100%;
    .col-tree {
        padding: 30px 30px 0;
        border-right: 1px solid #d8dde4;
    }

    .col-main {
        padding: 30px 30px 0;

        .button-s {
            margin-bottom: 10px;
        }
    }

    .title-button {
        width: 100%;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .title-button::-webkit-scrollbar {
        height: 0;
        width: 0;
        color: transparent;
    }
    .tree-length{
        height:100%;
    }
}
</style>
